<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Простенький canvas</title>
    <!--[if IE]><script type="text/javascript" src="/canvas/excanvas.js"></script><![endif]-->

    <script type="text/javascript" src="/canvas/canvas3d.js"></script>
    <!--[if IE]><script defer="defer" type="text/javascript">init();</script><![endif]-->
    <script type="text/javascript">
        function $( id ) {
            return document.getElementById( id );
        }

        // Задаю квадрат в плоскости X0Y единичных размеров
        // Вершины индексированы, обход против часовой для определения нормалей
        // Все вершины всегда в формате XYZ
        var vertexes = [    -1, -1, -1, // 00 - ftl
                            -1,  1, -1, // 01 - fdl
                             1,  1, -1, // 02 - fdr
                             1, -1, -1, // 03 - ftr

                            -1, -1,  1, // 04 - btl
                             1, -1,  1, // 05 - btr

                            -1,  1,  1, // 06 - bdl
                             1,  1,  1  // 07 - bdr
                            ];

        var indexes  = [
                            3, 2, 5,
                            2, 7, 5,

                            0, 1, 2,
                            0, 2, 3,

                            0, 3, 5,
                            0, 5, 4
                            ];
/*
        var indexes  = [    0, 1, 2, // front
                            0, 2, 3,

                            0, 3, 5, // top
                            0, 5, 4,

                            1, 7, 2, // bottom/down
                            1, 6, 7,

                            3, 2, 5, // right
                            2, 7, 5,

                            0, 6, 1, // left
                            0, 4, 6,

                            5, 7, 6, // backward
                            5, 6, 4
                            ];
*/
        var obj = new VBO( vertexes, indexes );

        // канва для вывода
        var canvas3d = null;

        var angle = 0;

        var MAX_FPS = 30;

        function init() {
            canvas3d = new Canvas3D( $('canvas_id') );
            canvas3d.camera.location = [0,0,-3];
            canvas3d.oCullFace = true;
            //canvas3d.oCullFaceBack = false;
            canvas3d.oDrawMode = C3D_DRAW_MODE_FILL;

            canvas3d.draw = function( ctx, width, height ) {
                ctx.clearRect( 0, 0, width, height );
/*
                canvas3d.ModelView.loadIdentity();
                canvas3d.ModelView.translate( -0.5, -0.5, 0 );
                canvas3d.ModelView.scale( 0.2 );
                canvas3d.ModelView.rotateY( angle ).rotateX( angle );
                canvas3d.oDrawMode = C3D_DRAW_MODE_LINES;
                canvas3d.drawVBO( obj );

                canvas3d.ModelView.loadIdentity();
                canvas3d.ModelView.translate( -0.5, 0.5, 0 );
                canvas3d.ModelView.scale( 0.2 );
                canvas3d.ModelView.rotateY( -angle ).rotateX( angle );
                canvas3d.oCullFaceBack = false;
                canvas3d.drawVBO( obj );
                canvas3d.oCullFaceBack = true;

                canvas3d.ModelView.loadIdentity();
                canvas3d.ModelView.translate( 0.5, -0.5, 0 );
                canvas3d.ModelView.scale( 0.3 );
                canvas3d.ModelView.rotateY( angle ).rotateX( 0.3 );
                canvas3d.oDrawMode = C3D_DRAW_MODE_LINES;
                canvas3d.oCullFace = false;
                canvas3d.drawVBO( obj );
                canvas3d.oCullFace = true;
*/
                canvas3d.ModelView.loadIdentity();
                //canvas3d.ModelView.translate( -0.4, 0, 0 );
                canvas3d.ModelView.scale( 0.5 );
                //canvas3d.ModelView.rotateX( 0 ).rotateY( -0.1 );
                canvas3d.ModelView.rotateX( 0.3 ).rotateY( -0.15 );
                //canvas3d.oDrawMode = C3D_DRAW_MODE_FILL;
                canvas3d.drawVBO( obj );

                angle += 0.003;
                if ( angle > 2*Math.PI ) {
                    angle -= 2*Math.PI;
                }

//              canvas3d.ModelView.loadIdentity();
//              canvas3d.ModelView.scale( 0.5, 0.5, 0.5 );
//              canvas3d.drawVBO( obj );

                $('fps_div').innerHTML = 'FPS: '+parseInt( canvas3d.FPS+0.49 )+' / '+MAX_FPS;
                $('fps_div').innerHTML += '<br>angle: '+parseFloat(angle);
            }

            canvas3d.main_loop( MAX_FPS );
        }

        if ( window.addEventListener ) window.addEventListener( 'DOMContentLoaded', init, false );

        // а тут еще хуже:
        // http://javascript.ru/forum/events/6072-domcontentloaded-i-defer.html
    </script>

    <script type="text/javascript">
/*
mesh'и: http://wiioperasdk.com/menu_meshgallery.php

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#images
http://atercattus.org/canvas/ext/example2.html
http://www.canvasdemos.com/
http://blog.nihilogic.dk/
*/

    </script>
    <style type="text/css">
        body {
            margin: 10px;
            padding: 0;
        }
        #canvas_id {
            border: 1px solid black;
        }
        #fps_div {
            position: absolute;
            left: 13px;
            top : 13px;
            z-index: 1;
            /*background-color: white;*/
            cursor: default;
        }
    </style>
</head>
<body>
    <canvas id="canvas_id" width="400" height="400">Браузер не поддерживает тег canvas</canvas>
    <div id="fps_div"></div>
<!--    <input type="button" value="Остановить/Запустить" onclick=""><br> -->
<!--
    <p style="margin-left:10px;">
        Работа проверена в:
        <ol>
            <li>Google Chrome 5.0.375.29 beta (Linux)</li>
            <li>Mozilla Firefox 3.5.9 (Linux)</li>
            <li>Opera 10.10.4742 (Linux)</li>
            <li>Opera Mobile 9.5 (Windows Mobile 6.1)</li>
            <li>InternetExplorer 8 обычный+совместимость (WinXP через VirtualBox в Linux)</li>
        <ol>
    </p>
-->
    <!--<img src="http://upload.wikimedia.org/wikipedia/commons/c/c4/Satellite_image_of_France_in_August_2002.jpg" width="100" height="100" alt="big image">-->
</body>
</html>
